<template>
  <div class="dashboard-container">
    <div class="header">
      <h1>库存调拨实时监控大屏</h1>
      <div class="status">
        <span :class="{ connected: isConnected }">{{ isConnected ? '已连接' : '未连接' }}</span>
      </div>
    </div>
    
    <div class="stats">
      <div class="stat-card">
        <div class="stat-value">{{ stats.totalItems }}</div>
        <div class="stat-label">总商品数</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ stats.totalQuantity }}</div>
        <div class="stat-label">总数量</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">¥{{ stats.totalAmount }}</div>
        <div class="stat-label">总金额</div>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="chart-row">
        <PieChart :data="xiangQingData" />
        <LineChart :data="xiangQingData" />
      </div>
      <div class="chart-row">
        <BarChart :data="xiangQingData" />
        <div class="table-section">
          <h3>调拨明细实时数据</h3>
          <el-table :data="xiangQingData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="productNumber" label="产品编号" />
            <el-table-column prop="specificationModel" label="规格" />
            <el-table-column prop="unit" label="单位" />
            <el-table-column prop="goodsType" label="商品类型" />
            <el-table-column prop="num" label="数量" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="jinPrice" label="金额" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { signalRService } from './signalRService';
import type { XiangQing } from './types';
import PieChart from './components/PieChart.vue';
import LineChart from './components/LineChart.vue';
import BarChart from './components/BarChart.vue';

const xiangQingData = ref<XiangQing[]>([]);
const isConnected = ref(false);

const stats = computed(() => ({
  totalItems: xiangQingData.value.length,
  totalQuantity: xiangQingData.value.reduce((sum, item) => sum + (item.num || 0), 0),
  totalAmount: xiangQingData.value.reduce((sum, item) => sum + (item.jinPrice || 0), 0)
}));

const handleDataReceived = (data: XiangQing[]) => {
  xiangQingData.value = data;
  console.log('收到数据:', data);
};

onMounted(async () => {
  try {
    await signalRService.startConnection();
    isConnected.value = true;
    signalRService.onXiangQings(handleDataReceived);
    await signalRService.triggerPush();
  } catch (error) {
    console.error('连接失败:', error);
  }
});

onUnmounted(() => {
  signalRService.stopConnection();
});
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 2.5rem;
  margin: 0;
}

.status {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

.status .connected {
  color: #22c55e;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

.charts-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.table-section {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
}

.table-section h3 {
  margin: 0 0 20px 0;
  text-align: center;
  color: #fff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .chart-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }
  
  .header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .header h1 {
    font-size: 1.8rem;
  }
  
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style> 